🦋 Changeset detected

Latest commit: a10ddbb

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Open in Stackblitz

npm i https://pkg.pr.new/qwikifiers/qwik-ui@960

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/headless@960

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/styled@960

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/utils@960

commit: a10ddbb

Hey Jerry! Just went through the implementation. We're getting close!

A couple of areas of improvement:

• Clicking outside the thumb (but still on the switch itself), does not toggle the switch
• When hitting the space key, it will turn on then back off (rather than on like the enter key)
• Certain accessibility features are missing (https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
• Every example seems to use a signal bind (this is usually only when the user wants to programmatically change something)

https://kobalte.dev/docs/core/components/switch/

I think this is a good source of inspiration to look at. Along with a set of resources I created here:
https://docs.google.com/document/d/18eA8WfrYtdkrRpavyoG8EmT_uzPtzt24ifOOTKk5In8/edit?tab=t.0

For example, I think it makes a lot of sense to have a new component tied to a piece of markup for the thumb, rather than having it be on a pseudo element, since that would follow the principles of composability. The idea that pieces of markup and components can blend in with each other in a straightforward way.

Atomic Design is a good read if you'd like to look further into it.

I think TDD / adding some tests would help a lot to prevent regressions and keep things robust. We need some tests before we can put the switch component in the beta stage.

Thank you for reviewing, I will fix it soon